import { Link,useNavigate } from 'react-router-dom'

import {useState,useEffect,useContext} from 'react'

import BaseHeader from '../partials/BaseHeader'
import BaseFooter from '../partials/BaseFooter'

import apiInstance from '../../utils/axios'
import CartId from '../plugin/Cartid'
import Toast from '../plugin/Toast'
import { CartContext } from '../plugin/Context'
import UserData from '../plugin/UserData'

function Cart() {
    const [cart,setCart] = useState([])
    const [cartStats,setCartStats] = useState([])
    const [cartCount,setCartCount] = useContext(CartContext)
    const [bioDate,setBioDate] = useState({
        full_name:"",
        email:"",
        country:""
    }) 

    const userId = UserData().user_id

    const fetchCartItem = async()=>{
        try{
            await apiInstance.get(`course/cart-list/${CartId()}/`).then((res)=>{
                console.log(res.data)
                setCart(res.data)
            });

            await apiInstance.get(`cart/stats/${CartId()}/`).then((res)=>{
                console.log(res.data)
                setCartStats(res.data)
            })
        }catch(error){
            console.log(error)
        }
    }
    useEffect(()=>{
        fetchCartItem()
    },[])

    const navigate = useNavigate('')

    const CartItemDelete = async(itemId)=>{
        await apiInstance.delete(`course/cart-item-delete/${CartId()}/${itemId}/`).then((res)=>{
            fetchCartItem();
            Toast().fire({
                icon:'success',
                title:'Cart item deleted'
            })
            apiInstance.get(`course/cart-list/${CartId()}/`).then((res)=>{
                setCartCount(res.data?.length)
            })
        })
    }


    function safeToFixed(value, decimalPlaces = 2) {
  // 检查是否为有效数字
        if (value === undefined || value === null || typeof value !== 'number') {
            return '0.00'; // 或其他默认值
        }
        return value.toFixed(decimalPlaces);
    }

    const handleBioDateChange = (event)=>{
        setBioDate({
            ...bioDate,
            [event.target.name]:event.target.value,
        });
    }

    const createOrder = async(e)=>{
        e.preventDefault()
        const formData = new FormData()
        formData.append('full_name',bioDate.full_name)
        formData.append('email',bioDate.email)
        formData.append('country',bioDate.country)
        formData.append('cart_id',CartId())
        formData.append('user_id',userId)

        await apiInstance.post(`order/create-order/`,formData).then((res)=>{
            console.log(res.data)
            navigate(`/checkout/${res.data.order_oid}`)
        })
    }

    return (
        <>
            <BaseHeader />

            <section className="py-0">
                <div className="container">
                    <div className="row">
                        <div className="col-12">
                            <div className="bg-light p-4 text-center rounded-3">
                                <h1 className="m-0">My cart</h1>
                                {/* Breadcrumb */}
                                <div className="d-flex justify-content-center">
                                    <nav aria-label="breadcrumb">
                                        <ol className="breadcrumb breadcrumb-dots mb-0">
                                            <li className="breadcrumb-item">
                                                <a href="#" className='text-decoration-none text-dark'>Home</a>
                                            </li>
                                            <li className="breadcrumb-item">
                                                <a href="#" className='text-decoration-none text-dark'>Courses</a>
                                            </li>
                                            <li className="breadcrumb-item active" aria-current="page">
                                                Cart
                                            </li>
                                        </ol>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section className="pt-5">
                <div className="container">
                    <form  onSubmit={createOrder}>
                        <div className="row g-4 g-sm-5">
                            {/* Main content START */}
                            <div className="col-lg-8 mb-4 mb-sm-0">
                                <div className="p-4 shadow rounded-3">
                                    <h5 className="mb-0 mb-3">Cart Items ({cart?.length})</h5>

                                    <div className="table-responsive border-0 rounded-3">
                                        <table className="table align-middle p-4 mb-0">
                                            <tbody className="border-top-2">
                                                {cart?.map((c,index)=>(
                                                <tr>
                                                    <td>
                                                        <div className="d-lg-flex align-items-center">
                                                            <div className="w-100px w-md-80px mb-2 mb-md-0">
                                                                <Link to={`/course-detail/${c.course.slug}/`}>
                                                                 <img src={c.course.image} style={{ width: "100px", height: "70px", objectFit: "cover" }} className="rounded" alt="" />
                                                                </Link>
                                                            </div>
                                                            <h6 className="mb-0 ms-lg-3 mt-2 mt-lg-0">
                                                                <a href="#" className='text-decoration-none text-dark' >{c.course.description}</a>
                                                            </h6>
                                                        </div>
                                                    </td>
                                                    <td className="text-center">
                                                        <h5 className="text-success mb-0">${c.price}</h5>
                                                    </td>
                                                    <td>
                                                        <button onClick={()=>CartItemDelete(c.id)} className="btn btn-sm btn-danger px-2 mb-0" type='button'>
                                                            <i className="fas fa-fw fa-times" />
                                                        </button>
                                                    </td>
                                                </tr>
                                                ))}

                                                {cart?.length<1&&(<p className='mt-1 p-1'>No item in cart</p>)}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                {/* Personal info START */}
                                <div className="shadow p-4 rounded-3 mt-5">
                                    {/* Title */}
                                    <h5 className="mb-0">Personal Details</h5>
                                    {/* Form START */}
                                    <div className="row g-3 mt-0">
                                        {/* Name */}
                                        <div className="col-md-12 bg-light-input">
                                            <label htmlFor="yourName" className="form-label">
                                                Your name *
                                            </label>
                                            <input
                                                type="text"
                                                className="form-control"
                                                id="yourName"
                                                placeholder="Name"
                                                name="full_name"
                                                value={bioDate.full_name}
                                                onChange={handleBioDateChange}
                                            />
                                        </div>
                                        {/* Email */}
                                        <div className="col-md-12 bg-light-input">
                                            <label htmlFor="emailInput" className="form-label">
                                                Email address *
                                            </label>
                                            <input
                                                type="email"
                                                className="form-control"
                                                id="emailInput"
                                                placeholder="Email"
                                                name="email"
                                                value={bioDate.email}
                                                onChange={handleBioDateChange}
                                            />
                                        </div>
                                        
                                        {/* Country option */}
                                        <div className="col-md-12 bg-light-input">
                                            <label htmlFor="mobileNumber" className="form-label">
                                                Entry country *
                                            </label>
                                            <input
                                                type="text"
                                                className="form-control"
                                                id="mobileNumber"
                                                placeholder="Country"
                                                name="country"
                                                value={bioDate.country}
                                                onChange={handleBioDateChange}
                                            />
                                        </div>

                                    </div>
                                    {/* Form END */}
                                </div>
                            </div>

                            <div className="col-lg-4">
                                <div className="p-4 shadow rounded-3">
                                    <h4 className="mb-3">Cart Total</h4>
                                    <ul class="list-group mb-3">
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            Sub Total
                                            <span>${safeToFixed(cartStats.price)}</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            Tax
                                            <span>${safeToFixed(cartStats.tax)}</span>
                                        </li>
                                        <li class="list-group-item d-flex fw-bold justify-content-between align-items-center">
                                            Total
                                            <span className='fw-bold'>${safeToFixed(cartStats.total)}</span>
                                        </li>
                                    </ul>
                                    <div className="d-grid">
                                        <button type='submit' className="btn btn-lg btn-success">
                                            Proceed to Checkout
                                        </button>
                                    </div>
                                    <p className="small mb-0 mt-2 text-center">
                                        By proceeding to checkout, you agree to these{" "}<a href="#"> <strong>Terms of Service</strong></a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </section>

            <BaseFooter />
        </>
    )
}

export default Cart